<template>
	<yd-layout id='goodsOrder' class=''>
		<div class="header">
			<div v-if='addressObj&&addressObj!="{}"' @click="goGoodsAddr" class="header_addr">
				<div class="header_addr_left">
					<div class="header_addr_top">
						<div class="header_people c_text_ellipsis_1">收货人：{{addressObj.reciver_name}}</div>
						<template v-if="addressObj.mobile&&(addressObj.mobile+'').length==11">
							<div class="header_tel">{{addressObj.mobile.slice(0,3)+'****'+addressObj.mobile.slice(7,11)}}</div>
						</template>

					</div>
					<div class="header_bottom">收货地址：{{addressObj.province}}&nbsp;{{addressObj.city}}&nbsp;{{addressObj.area}}&nbsp;{{addressObj.address}}</div>
				</div>
				<img class="header_addr_img" src="../../../assets/bd_img/right.png" alt="" />
			</div>
			<div @click="goGoodsAddr" v-else class="header_add">+请增加收货地址</div>

		</div>
		<div class="content">
			<div class="content_top">
				<div class="content_top_c">
					<div class="top_order_number">订单号：{{$route.query.id}}</div>
					<div class="top_time">{{orderObj.newTime}}</div>
				</div>
				<div class="content_goods">
					<img :src="orderObj.img" alt="" />
					<div class="goods_right">
						<div class="goods_title c_text_ellipsis_2">{{orderObj.goods_name}}</div>
						<div class="goods_money">￥{{orderObj.price}}</div>
					</div>
				</div>
			</div>
			<div class="content_list">
				<div class="list_name">购物数量</div>
				<div class="list_label">{{orderObj.number}}本</div>
			</div>
			<div class="content_list" style="borderBottom: none;">
				<div class="list_name">快递费</div>
				<div class="list_label" v-if="$route.query.free_post == 1" >免邮费</div>
				<div class="list_label" v-else >邮费到付</div>
			</div>
		</div>
		<div class="bottom" slot='bottom'>
			<div class="bottom_left">实付{{orderObj.price_total}}元</div>
			<div class="bottom_right" @click="payOrder">立即支付</div>
		</div>
	</yd-layout>
</template>

<script>
	var pingpp = require('pingpp-js');
	export default {
		components: {

		},
		data() {
			return {
				addressObj: {},
				orderObj: {},
			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		mounted() {
			document.title = '订单支付'
			this.orderDetail()
		},
		methods: {
			orderDetail() {
				this.$root.ajax({
					name: 'shop/order',
					type: 'get',
					params: {
						id: this.$route.query.id
					}
				}).then((d) => {
					d.data.order.newTime = this.$root.getDate(new Date(d.data.order.create_time * 1000))

					d.data.order.price = this.$root.setMoneyZero(d.data.order, 'price')
					d.data.order.price_total = this.$root.setMoneyZero(d.data.order, 'price_total')

					this.orderObj = Object.assign({}, this.orderObj, d.data.order)
					this.addressObj = d.data.address || ''
				})
			},

			goGoodsAddr() {
				this.$router.push({
					name: 'bd_goodsAddr',
					query: {
						id: this.addressObj.id
					}
				})
			},
			async payOrder() {
				if(this.addressObj && JSON.stringify(this.addressObj) != '{}') {
					if(this.$root.config.openId) {

					} else {
						await this.$root.getOpenId()
					}
					this.$root.ajax({
						name: 'shop/order/pay',
						params: {
							order_id: this.$route.query.id,
							address_id: this.addressObj.id,
							channel: 4,
							success_url: this.$root.config.openId,
						}
					}).then((d) => {
						d.data.charge.channel = 'wx_pub'
						pingpp.createPayment(d.data.charge, (result, err) => {
							// object 需是 Charge/Order/Recharge 的 JSON 字符串
							// 可按需使用 alert 方法弹出 log
							//console.log(JSON.stringify(object));
							if(result == "success") {
								this.$router.push({
									name:'bd_goodsSuccess'
								})
								// 只有微信JSAPI (wx_pub)、微信小程序（wx_lite）、QQ 公众号 (qpay_pub)、支付宝小程序（alipay_lite）支付成功的结果会在这里返回，其他的支付结果都会跳转到 extra 中对应的 URL
							} else if(result == "fail") {
								this.$dialog.toast({
									mes: err.msg,
									timeout: 1500
								});
								// Ping++ 对象 object 不正确或者微信JSAPI/微信小程序/QQ公众号支付失败时会在此处返回
							} else if(result == "cancel") {
								this.$dialog.toast({
									mes: '已取消支付！',
									timeout: 1500
								});
								// 微信JSAPI、微信小程序、QQ 公众号、支付宝小程序支付取消支付
							}
						});
					})
				} else {
					this.$dialog.toast({
						mes: '请先增加收货地址',
						timeout: 1500,
					});
				}

			}
		}
	}
</script>

<style lang="scss">
	@import './goodsOrder.scss';
</style>